import { View, Text } from "@tarojs/components";
// eslint-disable-next-line import/first
import { UserPanel as UserPanelType } from '@/types/global';
import "./index.less";

interface PanelProps {
  className?: string;
  isTop?: boolean;
  onCardsClick?: () => void;
  userPanel?: UserPanelType; // 从房间资源传入的玩家面板数据
}

export default function Panel({
  className = "",
  isTop = false,
  onCardsClick,
  userPanel
}: PanelProps) {
  // 处理点击卡片区域
  const handleCardsClick = () => {
    if (onCardsClick) {
      onCardsClick();
    } else {
      console.log("打开玩家持有卡片弹窗");
    }
  };

  // 如果没有传入玩家面板数据，则使用默认数据
  const getCurrentUserPanel = (): UserPanelType => {
    if (userPanel) {
      return userPanel;
    }
    
    // 默认玩家面板数据
    return {
      userIp: isTop ? "12" : "1", // IP=12为上方玩家，IP=1为下方玩家
      score: 15,
      crownsNum: 2,
      collectedGems: [],
      ready: false,
      discountRed: 1,
      discountBlue: 0,
      discountGreen: 2,
      discountWhite: 0,
      discountBlack: 1,
      gemNumRed: 3,
      gemNumBlue: 2,
      gemNumGreen: 1,
      gemNumWhite: 2,
      gemNumBlack: 4,
      gemNumGold: 1,
      gemNumPink: 0,
      gemNumTotal: 13,
      cardBought: [],
      cardKept: [],
      privilege: 3,
    };
  };

  const currentUserPanel = getCurrentUserPanel();

  // 宝石数据配置（包含所有颜色）
  const gemData = [
    {
      color: "red",
      name: "红色",
      count: currentUserPanel.gemNumRed,
      discount: currentUserPanel.discountRed,
    },
    {
      color: "blue",
      name: "蓝色",
      count: currentUserPanel.gemNumBlue,
      discount: currentUserPanel.discountBlue,
    },
    {
      color: "green",
      name: "绿色",
      count: currentUserPanel.gemNumGreen,
      discount: currentUserPanel.discountGreen,
    },
    {
      color: "white",
      name: "白色",
      count: currentUserPanel.gemNumWhite,
      discount: currentUserPanel.discountWhite,
    },
    {
      color: "black",
      name: "黑色",
      count: currentUserPanel.gemNumBlack,
      discount: currentUserPanel.discountBlack,
    },
    {
      color: "gold",
      name: "黄色",
      count: currentUserPanel.gemNumGold,
      discount: 0,
    },
    {
      color: "pink",
      name: "粉色",
      count: currentUserPanel.gemNumPink,
      discount: 0,
    },
  ];

  // 渲染宝石叠放效果
  const renderGemStack = (color: string, count: number) => {
    // 最多显示5个宝石叠放
    const displayCount = Math.min(count, 5);

    return Array.from({ length: displayCount }, (_, i) => (
      <View key={i} className={`gem-stack ${color}-gem`} />
    ));
  };

  return (
    <View className={`panelContainer ${className}`}>
      {/* 玩家信息区域 */}
      <View className='player-info'>
        <View className='player-name'>
          <Text>{isTop ? "对手玩家" : `当前玩家${userPanel?.userIp}`}</Text>
        </View>
      </View>

      {/* 宝石展示区域 */}
      <View className='gems-container'>
        <View className='gems-grid'>
          {gemData.map((gem, index) => (
            <View className='gem-item' key={index}>
              <View className='gem-stack-container'>
                {renderGemStack(gem.color, gem.count)} {/* 显示实际的宝石数量 */}
              </View>
              {/* 黄色和粉色宝石不显示折扣值 */}
              {gem.color === "gold" || gem.color === "pink" ? (
                <View className='gem-count' style={{ visibility: "hidden" }}>
                  x0
                </View>
              ) : (
                <View className={`gem-count ${gem.color}-count`}>
                  {gem.discount}
                </View>
              )}
            </View>
          ))}
          {/* 特权图标 */}
          <View className='gem-item'>
            <View className='icon-container'>
              <View className='privilege-icon' />
            </View>
            <View className='gem-count default-count'>
              x{currentUserPanel.privilege}
            </View>
          </View>
          {/* 皇冠图标 */}
          <View className='gem-item'>
            <View className='icon-container'>
              <View className='crowns-icon' />
            </View>
            <View className='gem-count default-count'>
              x{currentUserPanel.crownsNum}
            </View>
          </View>
        </View>
      </View>
    </View>
  );
}